<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue学习</title>

	</head>
	<body>
		<table id="table">

		</table>
		<h2> </h2>
		<script type="text/javascript">
			let books = [{
					id: 1,
					tdate: '2020-10',
					price: 100,
					count: 2,
					name: '《Java从入门到放弃》',
				},
				{
					id: 2,
					tdate: '2010-10',
					price: 90,
					count: 1,
					name: '《PHP从入门到放弃》',
				},
				{
					id: 3,
					tdate: '2012-10',
					price: 80,
					count: 1,
					name: '《Python从入门到放弃》',
				},
				{
					id: 4,
					tdate: '2013-10',
					price: 70,
					count: 1,
					name: '《什么都是从入门到放弃》',
				},

			]


			console.log(books);
			//2.获取id为table的标签
			let table = document.getElementById("table");
			//添加表头
			//创建thead标签
			let thead = document.createElement("thead");
			//创建tr标签
			let tr = document.createElement("tr")
			//创建th标签
			//let th = document.createElement("th");

			thead.appendChild(tr);
			//let td = document.createElement("td");
			let th = document.createElement("th");
			th.innerText = "ID";
			tr.appendChild(th);

			th = document.createElement("th");
			th.innerText = "名称";
			tr.appendChild(th);

			th = document.createElement("th");
			th.innerText = "日期";
			tr.appendChild(th);

			th = document.createElement("th");
			th.innerText = "价格";
			tr.appendChild(th);

			th = document.createElement("th");
			th.innerText = "数量";
			tr.appendChild(th);

			th = document.createElement("th");
			th.innerText = "操作";
			tr.appendChild(th);

			//附加到table
			table.appendChild(thead);

			let tbody = document.createElement("tbody");
			table.appendChild(tbody);


			for (let item of books) {
				let tr = document.createElement("tr");
				tbody.appendChild(tr);
				let td = document.createElement("td");
				td.innerText = item.id;
				tr.appendChild(td);

				td = document.createElement("td");
				td.innerText = item.name;
				tr.appendChild(td);

				td = document.createElement("td");
				td.innerText = item.tdate;
				tr.appendChild(td);

				td = document.createElement("td");
				td.innerText = item.price;
				tr.appendChild(td);

				td = document.createElement("td");
				td.innerHTML += "<button type='button'>-</button>";
				td.innerHTML += item.count;
				td.innerHTML += "<button type='button'>+</button>";
				tr.appendChild(td);

				td = document.createElement("td");
				td.innerHTML = "<button type='button'>移除</button>";
				tr.appendChild(td);
			}
			let h2 = document.getElementsByTagName("h2")[0];

			let result = books.reduce(function (returnVal,nextItem,index,arr) {
				// console.1og("x:::"+ x);
				//console.log("index:::" + index);
				//reduce处理对象数组
				let sum = 0;
				if (index === 1) {
					sum = returnVal.price * returnVal.count + nextItem.price * nextItem.count;
					return sum;

				}
		
				return returnVal + nextItem.price * nextItem.count;
			});
			console.log(result);
			h2.innerText = result;
		</script>

	</body>
</html>
